<template>
  <form-comp :formItem="formItem" v-model:formData="formData"></form-comp>
</template>
<script setup lang="ts">
import FormComp from '@/components/form/form.vue'
import { reactive, watchEffect } from 'vue'
import { FormItemType } from '@/components/form/type'
import { API } from '@/api/database.ts'

const props = defineProps<{
  templateName?: string
  templateCategory?: number
}>()

const formData = reactive({
  templateName: '',
  templateCategory: '',
})
const formItem = reactive<FormItemType[]>([
  {
    type: 'input',
    label: '模板名称',
    prop: 'templateName',
    required: true,
  },
  {
    type: 'select',
    label: '数据库',
    prop: 'templateCategory',
    required: true,
    props: { label: 'databaseCategoryName', value: 'id' },
    async: {
      url: API.DATA_BASE_CATEGORY_URL,
      method: 'post',
      fetchSearch: true,
      initRequest: true,
    },
  },
])
watchEffect(() => {
  formData.templateName = props.templateName
  formData.templateCategory = props.templateCategory
})
defineExpose({
  formData,
})
</script>

<style scoped lang="scss"></style>
